<template>
  <el-row class="container">
    <!-- 左侧个人信息部分 -->
    <el-col :span="4" class="info-left">
      <el-avatar class="avatar" :src="data_photo" @click="triggerFileInput" />
      <input type="file" ref="fileInput" @change="handleFileChange" style="display: none" />
      <div class="info-details">
        <div><strong>姓名：</strong> {{ userInfo.name }}</div>
        <div><strong>性别：</strong> {{ userInfo.gender }}</div>
      </div>
    </el-col>

    <!-- 右侧详细信息部分 -->
    <el-col :span="20">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="个人信息修改" name="edit-info">
          <!-- 个人信息修改内容 -->
          <el-form label-position="top">
            <el-form-item label="姓名">
              <el-input v-model="userInfo.name"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-select v-model="userInfo.gender">
                <el-option label="男" value="male" />
                <el-option label="女" value="female" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="saveChanges">保存修改</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="项目信息查看" name="project-info">
          <!-- 项目信息查看内容 -->
          <el-table :data="projectData">
            <el-table-column label="项目名称" prop="name" />
            <el-table-column label="状态" prop="status" />
            <el-table-column label="开始日期" prop="startDate" />
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-col>
  </el-row>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { userList } from "@/assets/mock/mockData";

const activeTab = ref("edit-info");
const data_photo = ref("src\assets\images\logo.svg");
const userInfo = ref({
  name: ""
});
const user = ref();
const fileInput = ref(null);

const projectData = ref([
  { name: "项目 A", status: "进行中", startDate: "2024-01-01" },
  { name: "项目 B", status: "已完成", startDate: "2023-06-15" }
]);

const saveChanges = () => {
  // 保存修改的代码
  alert("信息已保存");
};

const triggerFileInput = () => {
  fileInput.value.click();
};
const handleFileChange = event => {
  const file = event.target.files[0];
  if (file) {
    const reader = new FileReader();
    reader.onload = e => {
      data_photo.value = e.target.result;
    };
    reader.readAsDataURL(file);
  }
};

onMounted(() => {
  // 从localStorage中获取用户信息
  const userinform = JSON.parse(localStorage.getItem("userInfo") || "{}");
  if (userinform.userName) {
    user.value = userList.value.find(item => item.userName === userinform.userName);
    if (user.value) {
      userInfo.value.name = user.value.userName;
    }
  }
});
</script>

<style scoped>
.container {
  height: calc(86vh - 40px); /* 减去margin空间 */
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.info-left {
  height: 100%;
  border-right: 1px solid #e4e7ed;
  padding: 20px;
  background-color: #f6f8fa;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.avatar {
  margin-bottom: 20px;
  border: 4px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  width: 120px !important;
  height: 120px !important;
}

.info-details {
  width: 100%;
}

.info-details div {
  margin-bottom: 15px;
  padding: 8px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* 阴影 */
}

/* 右侧内容区域滚动设置 */
:deep(.el-tabs) {
  height: 100%;
}

/* 让右侧内容区域使用flex布局，确保填充剩余空间 */
.el-col {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 右侧内容区域的滚动设置 */
:deep(.el-tabs__content) {
  flex: 1; /* 让内容区域填满剩余的空间 */
  overflow-y: auto; /* 启用垂直滚动条 */
  padding: 20px;
  max-height: calc(100% - 40px); /* 设置最大高度，减去顶部或底部的空间 */
  margin-bottom: 20px;
  border-radius: 4px;
}
.el-tabs {
  margin-left: 20px; /* 给el-tabs组件增加左边距 */
}
.el-tabs__header {
  background-color: #f5f5f5;
  margin: 0;
}

.el-tabs__item {
  font-weight: bold;
}

/* 让form-item的label在顶部 */
.el-form-item__label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: bold;
}
</style>
